<template>
  <div class="date-table">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column v-if="multiple" type="selection" width="55" align="center" />
      <template v-for="item in tableHead">
        <!-- 普通文本展示 -->
        <el-table-column
          v-if="item.type=='text'"
          :key="item.value"
          :sortable="item.sort?'custom':false"
          :label="item.label"
          :align="item.align?item.align:'center'"
          :prop="item.value"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.value]?scope.row[item.value]:'--' }}</span>
          </template>
        </el-table-column>
        <!-- 其他数据展示 -->
        <el-table-column
          v-if="item.type=='isSlot'"
          :key="item.value"
          :label="item.label"
          :align="item.align?item.align:'center'"
          :prop="item.value"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <slot :name="item.value" :data="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page-sizes="pageSizes"
      :page.sync="pageNum_copy"
      :limit.sync="pageSize"
      @pagination="loadTableData"
    />
  </div>
</template>

<script>

export default {
  name: 'DataTable',
  props: {
    /**
   * @msg:
   *    表格头部信息
   *    tableHead:[
   *        {
   *           label: '编号', //显示信息名称
   *           value: "code", //对应名称的值
   *           type: 'text',  //显示类型有两种 text:普通文本  isSlot:自定义
   *           width: '100',  // 列宽度
   *           align: 'center' // 列对齐方式，left|center|right
   *         }
   *     ]
   *
   *      tableData     获取的table文本数据信息
   *      align            表格单元格内容排列顺序      left|center|right
   *      multiple         表格是否可多选
   *  事件：
   *      获取当前选中行
   *      调用页面用  @selectLine="xxx" 进行监听处理
   * }
   */
    // 表格头部信息
    tableHead: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 表格数据
    tableData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 获取表格数据方法
    getTableList: {
      type: Function,
      default: null
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 每页可选择的条数
    pageSizes: {
      type: Array,
      default() {
        return [5, 10, 15, 20]
      }
    },
    // 第几页
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    // 数据总条数
    total: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageNum_copy: this.pageNum
    }
  },
  created() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      const params = {
        pageNum: this.pageNum_copy,
        pageSize: this.pageSize
      }
      this.getTableList(params)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.$emit('selected', selection)
    },
    // 排序
    sortChange(val) {
      this.$emit('sortChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
